import Taro, { useState, useEffect } from '@tarojs/taro';
import { View, ScrollView, Text } from '@tarojs/components';
import { AtGrid, AtCard } from 'taro-ui';
import { Item } from 'taro-ui/@types/grid';
import './index.less';
import Utils from '../../utils/index';
// import CustomSwiper from '../../components/swiper';
import { WeacherInter } from '../../model/index';

const Home = props => {
  const [list, setList] = useState<Item[]>([]);
  const [weacher, setWeacher] = useState<WeacherInter>({
    city: '',
    province: '',
    reporttime: '',
    casts: {
      daytemp: '',
      dayweather: '',
    },
  });
  // 轮播图
  // const [ImagesList, setImagesList] = useState<string[]>([
  //   'http://img3.imgtn.bdimg.com/it/u=1208538952,1443328523&fm=26&gp=0.jpg',
  //   'http://img5.imgtn.bdimg.com/it/u=1035415831,1465727770&fm=26&gp=0.jpg',
  //   'http://img2.imgtn.bdimg.com/it/u=3823400770,3555259268&fm=26&gp=0.jpg',
  // ]);
  // 点击内容区
  const handleClick = (val: Item) => {
    console.log(val);
    let path = '';
    switch (val.value) {
      case '新闻':
        path = '/pages/home/todays-line/index';
        break;
    }
    Taro.navigateTo({
      url: path,
    });
  };
  // 初始化
  useEffect(() => {
    const listS: Item[] = [
      // {
      //   image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
      //   value: '找折扣',
      // },
    ];
    /**
     * 微信类目限制无法发布
     */
    if (process.env.TARO_ENV === 'h5')
      listS.push({
        image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
        value: '新闻',
      });
    setList(listS);
    setWeacher(props.weacher);
  }, [props]);
  const getPositionInfo = () => {
    props.refresh();
  };
  // 点击卡片
  const handlerCard = val => {
    console.log(val);
    // 点击刷新
    if (process.env.TARO_ENV === 'h5') {
      if (val && val.toElement.innerText === '刷新') {
        getPositionInfo();
      }
    }
  };
  const onScrollToUpper = () => {};
  const onScroll = val => {
    // console.log(val);
  };
  const scrollTop = 0;
  const Threshold = 20;
  return (
    <ScrollView
      // className="scrollHeight"
      scrollY
      style={Utils.scrollHeight}
      scrollWithAnimation
      scrollTop={scrollTop}
      lowerThreshold={Threshold}
      upperThreshold={Threshold}
      onScrollToUpper={onScrollToUpper} // 使用箭头函数的时候 可以这样写 `onScrollToUpper={this.onScrollToUpper}`
      onScroll={onScroll}
    >
      {/* <CustomSwiper list={ImagesList} /> */}
      <AtCard
        className="card"
        onClick={handlerCard}
        note={`更新时间 ${weacher.reporttime}`}
        extra={process.env.TARO_ENV === 'h5' ? '刷新' : ''}
        title={`${weacher.province} - ${weacher.city}`}
        thumb="https://taro.start6.cn/position.png"
      >
        <View className="CardView">
          <Text className="daytemp">{weacher.casts.daytemp}</Text>
          <Text className="dayw">°C</Text>
          <Text className="dayweather">{weacher.casts.dayweather}</Text>
        </View>
      </AtCard>
      <View className="container-grid">
        <AtGrid onClick={handleClick} mode="rect" hasBorder={false} data={list} />
      </View>
    </ScrollView>
  );
};

export default Home;
